<template>
	<view class="item">
		<!-- START 日期展示 -->
		<view class="item-date">
			<view class="date-day">
				{{item.date | dateFilter}}
			</view>
			<view class="date-money">
				<view class="money-box">
					收入:{{moneyCollect(item.list, 1)}}
				</view>
				<view class="money-box">
					支出:{{moneyCollect(item.list, 2)}}
				</view>
				<view class="money-box">
					合计:{{moneyCollect(item.list, 3)}}
				</view>
			</view>
		</view>
		<!-- END 日期展示 -->
		
		<!-- START 类型列表块 -->
		<view class="item-list" v-for="(c_item, c_index) in item.list" :key="c_index">
			<view class="list-icon">
				<image class="list-icon-image" src="../../../../static/images/tabBar/a-Frame15.png" mode=""></image>
			</view>
			<view class="list-content">
				<view class="content-type">
					<view class="content-type-icon" :class="{'type-icon-isExpend':c_item.isExpend}"></view>
					<view class="content-type-text">
						<view class="type-text-title">
							{{c_item.typeText}}
						</view>
						<view class="type-text-remark">
							{{c_item.remark}}
						</view>
					</view>
				</view>
				<view class="content-money">
					{{moneyTofixed(c_item.money)}}元
				</view>
			</view>
		</view>
		<!-- END 类型列表块 -->
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		filters: {
			dateFilter(value) {
				if(value && value!=null){
					let toLocaleDateString = new Date(value).toLocaleDateString()
					toLocaleDateString=toLocaleDateString.replace(/\//g,'-')
					let weak = new Date(value).getDay()
					weak = weak==6?'六':weak==5?'五':weak==4?'四':weak==3?'三':weak==2?'二':weak===1?'一':'日'
					return `${toLocaleDateString} 周${weak}`
				}else{
					return '--'
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			/**
			 * @czw 返回处理好的金额
			 * @param {Array} list 当前日期下的账单列表
			 * @param {Object} returnType 需要返回的数据类型：收入1 支出2 合计3
			 */
			moneyCollect(list, returnType) {
				let str=''
				let number=0
				if(returnType==3){
					list.forEach((c_item)=>{
						if(c_item.isExpend){
							number-=c_item.money
						}else{
							number+=c_item.money
						}
					})
				}else if(returnType==2){
					list.forEach((c_item)=>{
						number-=c_item.money
					})
				}else{
					list.forEach((c_item)=>{
						number+=c_item.money
					})
				}
				if(number>=0){
					str=`￥${this.moneyTofixed(number)}`
				}else{
					str=`-￥${this.moneyTofixed(number)}`
				}
				return str
			},
			moneyTofixed(value){
				let number=value>0?(value/100).toFixed(2):0
				if(value%10>0 && number>0){// 百分位有值
					number=(value/100).toFixed(2)
				}else if(value/10%10>0 && number>0){// 十分位有值
					number=(value/100).toFixed(1)
				}else{
					number=(value/100).toFixed(0)
				}
				return number
			}
		},
	}
</script>

<style lang="scss">
.item{
	font-size: 12px;
	.item-date{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f8f8f8;
		padding: 10px;
		box-sizing: border-box;
		.date-money{
			display: flex;
			align-items: center;
			.money-box{
				padding-left: 5px;
			}
			.money-box:first-child{
				padding-left: 0;
			}
		}
	}
	.item-list{
		display: flex;
		align-items: center;
		padding: 0 10px;
		box-sizing: border-box;
		width: 100%;
		.list-icon{
			flex-shrink: 0;
			margin-right: 15px;
			border-radius: 50%;
			width: 15px;
			height: 15px;
			.list-icon-image{
				width: 100%;
				height: 100%;
			}
		}
		.list-content{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #efefefef;
			padding: 10px 0;
			box-sizing: border-box;
			.content-type{
				flex: 1;
				display: flex;
				align-items: center;
				.content-type-icon{
					margin-right: 10px;
					width: 6px;
					height: 6px;
					border-radius: 50%;
					background-color: #04c030;
				}
				.type-icon-isExpend{
					background-color: #ff1200;
				}
				.content-type-text{
					font-size: 12px;
					.type-text-title{
						
					}
					.type-text-remark{
						max-width: 100px;
						white-space: nowrap;/*内容超宽后禁止换行显示*/
						overflow: hidden;/*超出部分隐藏*/
						text-overflow:ellipsis;/*文字超出部分以省略号显示*/
					}
				}
			}
			.content-money{
				flex-shrink: 0;
				margin-left: 15px;
				font-size: 14px;
			}
		}
	}
}
</style>
